@import "bourbon/bourbon";

button::-moz-focus-inner {
  border:0;
}

/* minimal
*******************************************************************************/
@mixin minimal {
  background: #e3e3e3;
  border: 1px solid #bbb;
  border-radius: 3px;
  @include box-shadow(inset 0 0 1px 1px #f6f6f6);
  color: #333;
  font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px;

  &:hover {
    background: #d9d9d9;
    @include box-shadow(inset 0 0 1px 1px #eaeaea);
    color: #222;
    cursor: pointer;
  }

  &:active {
    background: #d0d0d0;
    @include box-shadow(inset 0 0 1px 1px #e3e3e3);
    color: #000;
  }
}

button.minimal {
  @include minimal;
}

/* clean gray
*******************************************************************************/
@mixin clean-gray {
  @include linear-gradient(top, #eee, #ccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  width: 150px;

  &:hover {
    @include linear-gradient(top, #ddd, #bbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
  }

  &:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    @include box-shadow(inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee);
  }
}

button.clean-gray {
  @include clean-gray;
}

/* cupid green (inspired by okcupid.com)
*******************************************************************************/
@mixin cupid-green {
  @include linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
  border-radius: 3px;
  @include box-shadow(inset 0 1px 0 0 #96ca6d);
  color: #fff;
  font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 7px 0 8px 0;
  text-align: center;
  text-shadow: 0 -1px 0 #4c9021;
  width: 150px;

  &:hover {
    @include linear-gradient(top, #76b347, #5e9e2e);
    @include box-shadow(inset 0 1px 0 0 #8dbf67);
    cursor: pointer;
  }

  &:active {
    border: 1px solid #5b992b;
    border-bottom: 1px solid #538c27;
    @include box-shadow(inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee);
  }
}

button.cupid-green {
  @include cupid-green;
}

/* cupid blue (inspired by okcupid.com)
*******************************************************************************/
@mixin cupid-blue {
  @include linear-gradient(top, #d7e5f5, #cbe0f5);
  border-top: 1px solid #abbbcc;
  border-left: 1px solid #a7b6c7;
  border-bottom: 1px solid #a1afbf;
  border-right: 1px solid #a7b6c7;
  border-radius: 12px;
  @include box-shadow(inset 0 1px 0 0 #fff);
  color: #1a3e66;
  font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 6px 0 7px 0;
  text-align: center;
  text-shadow: 0 1px 1px #fff;
  width: 150px;

  &:hover {
    @include linear-gradient(top, #ccd9e8, #c1d4e8);
    border-top: 1px solid #a1afbf;
    border-left: 1px solid #9caaba;
    border-bottom: 1px solid #96a3b3;
    border-right: 1px solid #9caaba;
    @include box-shadow(inset 0 1px 0 0 #f2f2f2);
    color: #163659;
    cursor: pointer;
  }

  &:active {
    border: 1px solid #8c98a7;
    @include box-shadow(inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee);
  }
}

button.cupid-blue {
  @include cupid-blue;
}

/* blue pill (inspired by iTunes)
*******************************************************************************/
@mixin blue-pill {
  @include linear-gradient(top, #a5b8da, #7089b3);
  border-top: 1px solid #758fba;
  border-right: 1px solid #6c84ab;
  border-bottom: 1px solid #5c6f91;
  border-left: 1px solid #6c84ab;
  border-radius: 18px;
  @include box-shadow(inset 0 1px 0 0 #aec3e5);
  color: #fff;
  font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #64799e;
  text-transform: uppercase;
  width: 150px;

  &:hover {
    @include linear-gradient(top, #9badcc, #687fa6);
    border-top: 1px solid #6d86ad;
    border-right: 1px solid #647a9e;
    border-bottom: 1px solid #546685;
    border-left: 1px solid #647a9e;
    @include box-shadow(inset 0 1px 0 0 #a5b9d9);
    cursor: pointer;
  }

  &:active {
    border: 1px solid #546685;
    @include box-shadow(inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee);
  }
}

button.blue-pill {
  @include blue-pill;
}

/* thoughtbot (inspired by thoughtbot.com)
*******************************************************************************/
@mixin thoughtbot {
  @include linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;
  border-radius: 5px;
  @include box-shadow(inset 0 0 0 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333);
  color: #fff;
  font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 12px 0 14px 0;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, .8);
  width: 150px;

  &:hover {
    @include linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    cursor: pointer;
  }

  &:active {
    @include linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    @include box-shadow(inset 0 0 0 1px rgba(255, 115, 100, 0.4));
  }
}

button.thoughtbot {
  @include thoughtbot;
}

/* punch
*******************************************************************************/
@mixin punch {
  background: #4162a8;
  border-top: 1px solid #38538c;
  border-right: 1px solid #1f2d4d;
  border-bottom: 1px solid #151e33;
  border-left: 1px solid #1f2d4d;
  border-radius: 4px;
  @include box-shadow(inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111);
  color: #fff;
  font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
  margin-bottom: 10px;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #1e2d4d;
  width: 150px;
  -webkit-background-clip: padding-box;

  &:hover {
    @include box-shadow(inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111);
    cursor: pointer;
  }

  &:active {
    @include box-shadow(inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111);
    margin-top: 58px;
  }
}

button.punch {
  @include punch;
}

/* purple candy
*******************************************************************************/
@mixin purple-candy {
  @include linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  border-radius: 3px;
  color: #fff;
  font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #473569;
  width: 150px;
  -webkit-background-clip: padding-box;

  &:hover {
    @include linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    -webkit-background-clip: padding-box;
    cursor: pointer;
  }

  &:active {
    background: #4a1aab;
    background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),
                -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
    background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),
                -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
    color: #ddd;
    -webkit-background-clip: padding-box;
  }
}

button.purple-candy {
  @include purple-candy;
}

/* shiny blue (inspired by rdio iphone interface)
*******************************************************************************/
@mixin shiny-blue {
  @include linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  border-top: 1px solid #1f58cc;
  border-right: 1px solid #1b4db3;
  border-bottom: 1px solid #174299;
  border-left: 1px solid #1b4db3;
  border-radius: 4px;
  @include box-shadow(inset 0 0 2px 0 rgba(57, 140, 255, 0.8));
  color: #fff;
  font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0;
  text-shadow: 0 -1px 1px #1a5ad9;
  width: 150px;

  &:hover {
    @include linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    cursor: pointer;
  }

  &:active {
    border-top: 1px solid #1b4db3;
    border-right: 1px solid #174299;
    border-bottom: 1px solid #133780;
    border-left: 1px solid #174299;
    @include box-shadow(inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee);
  }
}

button.shiny-blue {
  @include shiny-blue;
}

/* download itunes
   I wrote a blog post about creating this button:
   http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss
*******************************************************************************/
@mixin download-itunes {
  @include linear-gradient(top, #52a8e8, #377ad0);
  border-top: 1px solid #4081af;
  border-right: 1px solid #2e69a3;
  border-bottom: 1px solid #20559a;
  border-left: 1px solid #2e69a3;
  border-radius: 16px;
  @include box-shadow(inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3);
  color: #fff;
  font: normal 11px/1 "lucida grande", sans-serif;
  padding: 3px 5px;
  text-align: center;
  text-shadow: 0 -1px 1px #3275bc;
  width: 112px;
  -webkit-background-clip: padding-box;

  &:hover {
    @include linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    border-top: 1px solid #2a73a6;
    border-right: 1px solid #165899;
    border-bottom: 1px solid #07428f;
    border-left: 1px solid #165899;
    @include box-shadow(inset 0 1px 0 0 #62b1e9);
    cursor: pointer;
    text-shadow: 0 -1px 1px #1d62ab;
    -webkit-background-clip: padding-box;
  }

  &:active {
    background: #3282d3;
    border: 1px solid #154c8c;
    border-bottom: 1px solid #0e408e;
    @include box-shadow(inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff);
    text-shadow: 0 -1px 1px #2361a4;
    -webkit-background-clip: padding-box;
  }
}

button.download-itunes {
  @include download-itunes;
}

button[disabled].download-itunes,
button[disabled].download-itunes:hover,
button[disabled].download-itunes:active {
  @include linear-gradient(top, #dadada, #f3f3f3);
  border-top: 1px solid #c5c5c5;
  border-right: 1px solid #cecece;
  border-bottom: 1px solid #d9d9d9;
  border-left: 1px solid #cecece;
  @include box-shadow(none);
  color: #8f8f8f;
  cursor: not-allowed;
  text-shadow: 0 -1px 1px #ebebeb;
}

button.download-itunes::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* skip (inspired by okcupid iphone interface)
*******************************************************************************/
@mixin skip {
  @include linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  border: 1px solid #172d6e;
  border-bottom: 1px solid #0e1d45;
  border-radius: 5px;
  @include box-shadow(inset 0 1px 0 0 #b1b9cb);
  color: #fff;
  font: bold 16px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #000f4d;
  width: 150px;

  &:hover {
    @include linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    cursor: pointer;
  }

  &:active {
    @include box-shadow(inset 0 0 20px 0 #1d2845, 0 1px 0 #fff);
  }
}

button.skip {
  @include skip;
}

/* minimal indent (inspired by okcupid iphone interface)
*******************************************************************************/
@mixin minimal-indent {
  @include linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #b4b4b4;
  border-right: 1px solid #dfdfdf;
  border-radius: 5px;
  @include box-shadow(inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef);
  color: #666;
  font: bold 16px/1 "helvetica neue", helvetica, arial, sans-serif;
  margin: 0;
  padding: 7px 0;
  text-shadow: 0 1px 1px #fff;
  width: 150px;

  &:hover {
    @include linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    @include box-shadow(inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3);
    cursor: pointer;
  }

  &:active {
    @include box-shadow(inset 0 0 30px 0 #999, 0 1px 0 0 #fff);
  }
}

div.indent {
  @include linear-gradient(#e2e2e2, #fafafa);
  border-bottom: 1px solid #e7e7e7;
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  border-top: 1px solid #dfdfdf;
  border-radius: 8px;
  margin: 50px auto 0;
  padding: 10px 0;
  width: 170px;
}

button.minimal-indent {
  @include minimal-indent;
}

/* webkit badge
*******************************************************************************/
@mixin webkit-badge {
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
  color: #fff;
  font: lighter italic 30px/1 "hoefler text", georgia, serif;
  height: 88px;
  padding: 0;
  text-align: center;
  text-shadow: 0 -1px 1px #3d0700;
  width: 150px;
  -webkit-mask-image: url("../images/badge.png");
  -webkit-mask-position: left top;
  -webkit-mask-repeat: no-repeat;

  &:hover {
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
    cursor: pointer;
  }

  &:active {
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
  }
}

button.webkit-badge {
  @include webkit-badge;
}

/* webkit seal
*******************************************************************************/
@mixin webkit-seal {
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(1, #6224de));
  color: #fff;
  height: 90px;
  color: #fff;
  font: bold 13px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 0;
  text-align: center;
  text-shadow: 0 -1px 1px #473569;
  width: 150px;
  -webkit-mask-image: url("../images/seal.png");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;

  &:hover {
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(1, #561fc4));
    cursor: pointer;
  }

  &:active {
    background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab));
  }
}

button.webkit-seal {
  @include webkit-seal;
}

/* webkit check
*******************************************************************************/
@mixin webkit-check {
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(1, #2463de));
  color: #fff;
  height: 88px;
  padding: 0;
  text-align: center;
  text-indent: -9999px;
  text-shadow: 0 -1px 1px #3d0700;
  width: 150px;
  -webkit-mask-image: url("../images/check.png");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;

  &:hover {
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(1, #1d55c4));
    cursor: pointer;
  }

  &:active {
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab));
  }
}

button.webkit-check {
  @include webkit-check;
}

/* disabled button styles
   works with this markup: <button disabled="disabled">Submit</button>
*******************************************************************************/
button[disabled],
button[disabled]:hover,
button[disabled]:active {
  background: #999;
  border: 0;
  @include box-shadow(none);
  color: #aaa;
  cursor: not-allowed;
  text-shadow: none;
}

@import "screen";

